<!--
 * @Description: OSPF的邻居状态
 * @Author: 0001101008/HuYuxi
 * @Date: 2021-10-21 10:17:37
 * @LastEditTime: 2021-10-30 15:18:38
 * @LastEditors: 0001101008/HuYuxi
-->
<template>
  <div class="page-content" style="padding: 0">
    <table-bar
      :showTop="false"
      :layout="['column']"
      :columns="columns"
      @changeColumn="changeColumn"
    >
      <div slot="top"></div>
      <div slot="bottom">
        <!-- 新建 -->
        <el-button size="medium" type="primary" plain @click="refresh" v-power="2">查询</el-button>
      </div>
    </table-bar>
    <tao-table
      class="table-box"
      :data="dataList"
      :page="page"
      @changePage="changePage"
      :showPage="true"
      ref="table"
    >
      <!-- 接口名称 -->
      <el-table-column
        label="接口名称"
        align="center"
        width="150"
        sortable
        prop="interfaceName"
        v-if="columns[0].show"
      >
        <template slot-scope="scope">
          <span>{{scope.row.interfaceName ? scope.row.interfaceName: '-'}}</span>
        </template>
      </el-table-column>
      <!-- 区域ID -->
      <el-table-column
        label="区域ID"
        show-overflow-tooltip
        min-width="150"
        align="center"
        prop="areaId"
        v-if="columns[1].show"
      >
        <template slot-scope="scope">
          <span>{{scope.row.areaId ? scope.row.areaId: '-'}}</span>
        </template>
      </el-table-column>
      <!-- 邻居ID -->
      <el-table-column
        label="邻居ID"
        show-overflow-tooltip
        min-width="150"
        align="center"
        prop="neighbourId"
        v-if="columns[2].show"
      >
        <template slot-scope="scope">
          <span>{{scope.row.neighbourId ? scope.row.neighbourId: '-'}}</span>
        </template>
      </el-table-column>
      <!-- 邻居地址 -->
      <el-table-column
        label="邻居地址"
        show-overflow-tooltip
        min-width="150"
        align="center"
        prop="neighbourIpAddress"
        v-if="columns[3].show"
      >
        <template slot-scope="scope">
          <span>{{scope.row.neighbourIpAddress ? scope.row.neighbourIpAddress : '-'}}</span>
        </template>
      </el-table-column>
      <!-- 邻居角色 -->
      <el-table-column
        label="邻居角色"
        show-overflow-tooltip
        min-width="150"
        align="center"
        prop="neighbourRole"
        v-if="columns[4].show"
      >
        <template slot-scope="scope">
          <span>{{scope.row.neighbourRole ? scope.row.neighbourRole : '-'}}</span>
        </template>
      </el-table-column>
      <!-- 邻居状态 -->
      <el-table-column
        label="邻居状态"
        show-overflow-tooltip
        min-width="150"
        align="center"
        prop="neighbourState"
        v-if="columns[5].show"
      >
        <template slot-scope="scope">
          <span>{{scope.row.neighbourState ? scope.row.neighbourState : '-'}}</span>
        </template>
      </el-table-column>
    </tao-table>
  </div>
</template>

<script>
export default {
  props: ['ne', 'menuList'],
  data () {
    return {
      dataList: [],
      show: 0,
      page: {
        page: 1,
        pageSize: 15,
        total: 0
      },
      columns: [
        { name: '接口名称', show: true },
        { name: '区域ID', show: true },
        { name: '邻居ID', show: true },
        { name: '邻居地址', show: true },
        { name: '邻居角色', show: true },
        { name: '邻居状态', show: true },
      ],
      insDatas: []
    };
  },
  methods: {
    // 过滤显示字段
    changeColumn (columns) {
      this.columns = columns;
      this.$refs.table.doLayout();
    },
    // 切换页码 & 显示条数
    changePage (page) {
      if (page.page) {
        this.page.page = page.page;
      } else {
        this.page.page = 1;
        this.page.pageSize = page.limit;
      }
      this.refresh();
    },
    // 刷新
    reset () {
      let _this = this;
      _this.page.page = 1;
      _this.refresh();
    },
    refresh () {
      let _this = this;
      let params = {
        commandCode: 'route.ospf.neighbours.get'
      };

      _this.$http.post({
        url: '/api/resource/nemng/command/' + _this.ne.id,
        data: params
      }).then(res => {
        if (res) {
          let list = res;
          if (list.length > 0) {
            _this.dataList = list;
          } else {
            _this.$message.info('暂无数据');
          }
        }
      });
    },
    // 创建OSPF实例
    handleCreate () {
      let _this = this;
      _this.show = 1;
    },
    // 菜单按钮
    handleCommand (val) {
      let _this = this;
      _this.$emit('showOSPF', val);
    }
  }
};
</script>

<style lang="scss" scoped>
.page-content {
  width: 100%;
  height: 100%;
  .table-top {
    margin-bottom: 15px;
  }
  .table-box {
    ::v-deep .el-button {
      padding: 0;
    }
    ::v-deep .el-dropdown-link {
      cursor: pointer;
      color: #409eff;
    }
  }
  .btn-select {
    width: 89px;
    margin-right: 10px;
    ::v-deep .el-button {
      padding: 10px;
    }
  }
}
</style>